// =============================================================================
// SCSS/SITE/STACKS/ICON/_NAVBAR.SCSS
// -----------------------------------------------------------------------------
// Contains styles for the navbar.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Common Styles
//   02. Brand
//   03. Navigation
//   04. Fixed Navbar
//   05. Search
// =============================================================================

// Common Styles
// =============================================================================

.x-navbar {
  position: relative;
  overflow: visible;
  border-bottom: 1px solid $baseBorderSolid;
  border-bottom: 1px solid $baseBorderRgba;
  @include font-size(1.5);
  background-color: $navbarBackground;
  z-index: $zindexNavbar;
}


//
// Set width to auto for default container.
// We then reset it for fixed navbars in the #gridSystem mixin.
//

.x-navbar .container {
  width: auto;
}


//
// Override the default collapsed state.
//

.x-nav-collapse.collapse {
  height: auto;
}



// Brand
// =============================================================================

.x-brand {
  display: inline-block;
  border: 0;
  font-family: $altFontFamily;
  @include font-size(5.4);
  font-weight: $navbarBrandFontWeight;
  letter-spacing: -3px;
  line-height: 1;
  color: $navbarBrandColor;

  &:hover {
    text-decoration: none;
    color: $navbarBrandColor;
  }
}

.x-navbar .x-brand {
  float: left;
  display: block;
}



// Navigation
// =============================================================================

.x-navbar .x-nav {
  margin: 0;
}

.x-navbar .x-nav > li {
  float: left;
  height: $navbarHeight;
  padding: 20px 2px 0;

  &:last-child {
    margin-right: 0;
  }
}

.masthead-inline .x-nav {
  display: block;
  float: right;
}

.masthead-stacked .x-nav {
  display: table;
  margin-left: auto;
  margin-right: auto;
  @include break(cubs) {
    display: block;
  }
}


//
// Links.
//

.x-navbar .x-nav > li > a {
  float: none;
  border: 1px solid transparent;
  padding: 0.875em 1.25em 0.825em;
  line-height: 1;
  font-weight: $navbarLinkFontWeight;
  letter-spacing: 1px;
  text-decoration: none;
  color: $navbarLinkColor;
  border-radius: 100em;
}

.x-navbar .x-nav li > a {
  &:after {
    content: "\f103";
    margin-left: 0.35em;
    letter-spacing: 0;
    @include font-awesome();
  }

  &:only-child:after {
    content: "";
    display: none;
  }
}


//
// Hover.
// 1. Transparent is default to differentiate :hover from :active.
//

.x-navbar .x-nav > li > a:hover {
  color: $navbarLinkColorHover;
  border-color: $baseBorderSolid;
  border-color: $baseBorderRgba;
  background-color: $navbarLinkBackgroundHover; // 1
  text-decoration: none;
}


//
// Active nav items.
// 1. Transparent is default to differentiate :hover from :active.
//

.x-navbar .x-nav > .current-menu-item > a {
  text-decoration: none;
  color: $navbarLinkColorHover;
  border-color: $baseBorderSolid;
  border-color: $baseBorderRgba;
  background-color: $navbarLinkBackgroundHover; // 1
}


//
// Navbar button for toggling navbar items in responsive layouts.
//

.x-btn-navbar {
  display: none;
  border: 1px solid $baseBorderSolid;
  border: 1px solid $baseBorderRgba;
  padding: 0.458em 0.625em;
  @include font-size(2.4);
  line-height: 1;
  text-shadow: $navbarBtnTextShadow;
  color: darken($navbarLinkColor, 15%);
  background-color: $navbarBtnBackgroundHover;
  @include box-shadow(#{$navbarBtnBoxShadowHover});
  @include transition(#{box-shadow 0.3s ease, color 0.3s ease, background-color 0.3s ease});

  &:hover {
    color: darken($navbarLinkColor, 15%);
  }
}

.x-btn-navbar.collapsed {
  color: $navbarLinkColor;
  background-color: $navbarBtnBackground;
  @include box-shadow(#{none});

  &:hover {
    color: darken($navbarLinkColor, 15%);
    background-color: $navbarBtnBackgroundHover;
    @include box-shadow(#{$navbarBtnBoxShadowHover});
  }
}



// Fixed Navbar
// =============================================================================

//
// Shared top/bottom/left/right styles.
//

.x-navbar-fixed-top,
.x-navbar-fixed-left,
.x-navbar-fixed-right {
  position: fixed;
  z-index: $zindexNavbar;
}

//
// Top styles.
//

.x-navbar-fixed-top-active {
  .x-navbar-wrap {
    margin-bottom: 1px;
    height: $navbarHeight;
    @include break(cubs) {
      margin-bottom: 0;
      height: auto;
    }
  }
}

.x-navbar-fixed-top {
  top: 0;
  left: 0;
  right: 0;
  
}

@include break(papa-bear) {
  .x-content-sidebar-active {
    .x-navbar-fixed-top {
      right: $sidebarWidth;
    }
  }

  .x-sidebar-content-active {
    .x-navbar-fixed-top {
      left: $sidebarWidth;
    }
  }
}


//
// Left/right styles.
//

.x-navbar-fixed-left,
.x-navbar-fixed-right {
  top: 0;
  bottom: 0;
  width: $navbarFixedSideWidth;

  .x-navbar-inner {
    height: 100%;

    > .x-container-fluid.width {
      width: 100%;
    }
  }

  .x-brand {
    float: none;
    text-align: center;
  }

  .x-nav {
    float: none;
    margin-top: 2em;

    > li {
      float: none;
      padding: 0 25px;
      @include break(mama-bear) {
        height: auto;
        margin-bottom: 10px;
      }

      > a {
        text-align: center;
        padding: 20px 7%;

        &:focus,
        &:hover {
          
        }
      }
    }
  }
}

.x-navbar-fixed-left {
  left: 0;
  border-right: 1px solid $baseBorderSolid;
  border-right: 1px solid $baseBorderRgba;
  @include break(cubs) {
    border-right: 0;
  }
}

.x-navbar-fixed-right {
  right: 0;
  border-left: 1px solid $baseBorderSolid;
  border-left: 1px solid $baseBorderRgba;
  @include break(cubs) {
    border-left: 0;
  }
}



// Search
// =============================================================================

.x-navbar .x-nav li.menu-item-navbar-search {
  text-align: center;

  > a {
    letter-spacing: 0;

    &:after {
      display: none;
    }
  }
}